<template>
  <u-popup :show="show" mode="center"  @close="closeHandle" bgColor="transparent">
   <view class="reload-history-modal-wrapper">
      <view
        class="main-wrapper"
        :style="{'background-image':`url(${staticImgs.bgD})`}"
      >
        <view class="tit">温馨提示</view>
        <view class="con">
          <template v-if="percent>99">
            <view>检测到您已经完成本测试</view>
            <view>完成支付后就能获取完整专业报告</view>
          </template>
          <template v-else>
            <view>检测到您之前有完成部分测试题</view>
            <view>是否要延续之前的做题记录？</view>
          </template>
        </view>
        <view class="btn-group">
          <view class="btn-box retest-btn" @click="closeHandle">
            重新测试
          </view>
          <view class="btn-box report-btn" @click="confirmHandle">
            <template v-if="percent>99">
              解锁报告
            </template>
            <template v-else>
              继续完成
            </template>
          </view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
  export default{
    props:{
      visible:{
        type:Boolean,
        default:false
      },
      percent:{
        type:Number,
        default:100,
      }
    },
    data(){
      return {
        show:false,
        staticImgs:{
          bgD: this.imgBaseURL + '/scl/reload-scl-history-modal-bg-mbti.png',
        },
      }
    },
    watch:{
      visible:{
        handler(val){
          console.log(val,'===================== reloadHistoryVisible')
          this.show = val
        },
        immediate:true
      },
    },
    methods:{
      confirmHandle(){
        this.show = false
        this.$emit('confirm')
      },
      closeHandle(){
        this.show = false
        this.$emit('close')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .reload-history-modal-wrapper{
    
    .main-wrapper{
      background-repeat: no-repeat;
      background-size: contain;
      
      width: 540rpx;
      height: 360rpx;
      box-sizing: border-box;
      padding-top: 40rpx;
      
      .tit{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
        text-align: center;
        font-style: normal;
      }
      .con{
        display: flex;
        flex-direction: column;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #063214;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
        
        
        padding: 0 34rpx;
        
        margin-top: 24rpx;
        margin-bottom: 40rpx;
      }
      .btn-group{
        display: flex;
        justify-content: center;
        column-gap: 22rpx;
        
        .btn-box{
          width: 210rpx;
          height: 84rpx;
          
          border-radius: 14rpx;
          line-height: 84rpx;
          
        }
        
        .retest-btn{
          width: 230rpx;
          height: 70rpx;
          background: #FFFFFF;
          border-radius: 35rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #2B4F9B;
          line-height: 70rpx;
          text-align: center;
          font-style: normal;
        }
        .report-btn{
          width: 230rpx;
          height: 70rpx;
          background: linear-gradient( 180deg, #8DA8FF 0%, #495CFF 100%);
          border-radius: 35rpx;
          
          line-height: 70rpx;
          
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: #FFFFFF;
          text-align: center;
          font-style: normal;
          
        }
        
        
      }
    }
    
  }             
</style>